import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:xiaotiancai/style.dart';
import 'package:xiaotiancai/widget/StarRating.dart';
class DetailPage extends StatefulWidget{
  const DetailPage({super.key});
  @override
  State<StatefulWidget> createState()=>_HomePage();
}
class _HomePage extends State<DetailPage>{
  @override
  void initState() {
    super.initState();
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark));
  }
  @override
  Widget build(BuildContext context) {
    return Material(
      child: SafeArea(
        child: Column(
          children: [
            Expanded(child: Container(
              color: Style.background,
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children:[
                    SizedBox(
                      height: 300,
                      child: Swiper(itemBuilder:(c,i){
                        return Container(decoration:const BoxDecoration(
                            borderRadius: BorderRadius.vertical(bottom: Radius.circular(10)),
                            image: DecorationImage(image: NetworkImage("https://static-assets-prod.okii.com/xtc-products/z8/pc/scene-section/bg5.jpg"),fit:BoxFit.cover)
                        ));
                      },
                        itemCount: 4,
                        pagination: SwiperPagination(
                          alignment: Alignment.bottomCenter,
                          margin: const EdgeInsets.only(bottom: 5),
                          builder: DotSwiperPaginationBuilder(
                              space: 5,
                              size: 10,
                              activeSize: 12,
                              color: Colors.white,
                              activeColor: Style.primaryColor),
                        ),),
                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(
                          vertical: 10,
                          horizontal: 25
                      ),
                      color: Style.primaryColor,
                      child: Row(crossAxisAlignment: CrossAxisAlignment.end,children: const [
                        Text("¥",style: TextStyle(
                            color: Colors.white
                        ),),
                        Text("213",style: TextStyle(
                            fontSize: 30,
                            color: Colors.white,
                            fontWeight: FontWeight.bold
                        ),),
                      ],),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20,vertical: 10),
                      child: Container(
                        padding: const EdgeInsets.all(10),
                        decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                        ),child: Column(children: [

                        InkWell(
                          onTap:(){

                          },
                          child: Padding(
                            padding: const EdgeInsets.symmetric(vertical: 10),
                            child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: const [
                              Text("已选：Z8-碧海蓝"),
                              Icon(Icons.keyboard_arrow_right_rounded),
                            ],),
                          ),
                        ),
                        InkWell(
                          onTap:(){},
                          child: Padding(
                            padding: const EdgeInsets.symmetric(vertical: 10),
                            child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: const [
                              Text("送至：请选择地址"),
                              Icon(Icons.keyboard_arrow_right_rounded),
                            ],),
                          ),
                        ),
                        const SizedBox(height: 10,),
                        Container(
                          padding: const EdgeInsets.symmetric(horizontal: 10,vertical: 10),
                          decoration: const BoxDecoration(
                              color:Color(0xfffbfbfb),
                              borderRadius: BorderRadius.all(Radius.circular(10))
                          ),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
                          Row(children: const [
                            Icon(Icons.ac_unit),
                            Text("官方正品"),
                          ],),
                          Row(children: const [
                            Icon(Icons.ac_unit),
                            Text("全国联保"),
                          ],),
                          Row(children: const [
                            Icon(Icons.ac_unit),
                            Text("7天退换"),
                          ],),
                        ],),)
                      ],),),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20,vertical: 10),
                      child: Container(
                        padding: const EdgeInsets.all(10),
                        decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                        ),child: Column(children: [
                        Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: const [
                          Text("用户评价",style: TextStyle(fontWeight: FontWeight.bold),),
                          Text("查看全部>",style: TextStyle(color: Colors.grey),),
                        ],),
                        Padding(
                          padding: const EdgeInsets.symmetric(vertical: 10,horizontal: 10),
                          child: SingleChildScrollView(
                            scrollDirection: Axis.horizontal,
                            child: Row(children:List.generate(5, (index){
                              return Padding(
                                padding: const EdgeInsets.symmetric(horizontal: 5),
                                child: Container(padding: const EdgeInsets.all(5),decoration: const BoxDecoration(
                                    color: Color(0xfffbfbfb),
                                    borderRadius: BorderRadius.all(Radius.circular(5))
                                ),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children:  [
                                  const Text("微信用户",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18),),
                                  const Text("此商品默认好评"),
                                  StarRating(rating: 10, unselectedImage: const Icon(Icons.star_border, color: Colors.grey, size: 20),
                                      selectedImage: Icon(Icons.star, color: Style.primaryColor,size: 20))
                                ],),),
                              );
                            }),),
                          ),
                        )

                      ],),),
                    ),

                  ],
                ),
              ),
            ),),
            Container(
              padding: const EdgeInsets.symmetric(vertical: 10,horizontal: 15),
              child: Row(children: [
                Expanded(
                  child:   Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [
                    Column(children: const [
                      Icon(Icons.account_balance),
                      Text("首页")
                    ],),
                    Column(children: const [
                      Icon(Icons.account_balance),
                      Text("客服")
                    ],),
                    Column(children: const [
                      Icon(Icons.account_balance),
                      Text("购物车")
                    ],),
                  ],),
                ),
                Expanded(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [
                  Expanded(
                    child: InkWell(
                      onTap:(){

                      },
                      child: Container(
                        padding: const EdgeInsets.symmetric(vertical: 10),
                        decoration: const BoxDecoration(
                            color: Colors.black,
                            borderRadius: BorderRadius.horizontal(left: Radius.circular(15))
                        ),child: const Center(child: Text("加入购物车",style: TextStyle(color: Colors.white),)),),
                    ),
                  ),
                  Expanded(
                    child: InkWell(
                      onTap:(){

                      },
                      child: Container(
                          padding: const EdgeInsets.symmetric(vertical: 10),
                          decoration: BoxDecoration(
                              color: Style.primaryColor,
                            borderRadius: const BorderRadius.horizontal(right: Radius.circular(15))
                          ),child: const Center(child: Text("立即购买",style: TextStyle(color: Colors.white)))),
                    ),
                  ),

                ],))


              ],),
            )
          ],
        ),
      ),
    );
  }
}